<template>
  <div>
    <scroll-view :style="{'height': scrollHeight + 'px'}" :scroll-y="true" @scrolltolower="lower" @scroll="scroll" enable-back-to-top="true">
      <view class="pulllayout-header" :hidden="headerHide" animation="{headerAnimationData}">
        <text>刷新数据...</text>
      </view>
      <div class="order-list-box" v-for="(item,index) in orderList" :key="index">
        <h4>退款单号：{{item.refund_id}} <font class="red45">{{item.status_text}}</font>
        </h4>
        <div class="order-list" @click="toOrderDetailsPage(item.refund_id)">
          <dl v-for="(product,i) in item.products" :key="i">
            <dt><img :src="product.product_cover +'?x-oss-process=image/resize,m_pad,h_400,w_400,color_ffffff/quality,Q_80/format,jpg'"></dt>
            <dd>
              <h2>{{product.designer_name}}</h2>
              <p>{{product.product_name}}</p>
              <p class="gray">尺码 ：{{product.size}}</p>
            </dd>
            <h3>
              <font>x{{product.product_qty}}</font>{{product.currency_logo}}{{product.show_price}}
            </h3>
          </dl>
          <div class="order-settle"><span class="fr">共{{item.total_qty}}件商品 　 合计：¥{{item.refund_amount}}</span></div>
        </div>
      </div>
      <view class="pulllayout-footer" :hidden="footerHide">
        <text>{{loadMoreText}}</text>
      </view>
    </scroll-view>
    <placeholder :show.sync="isPageEmpty" :message.sync="emptyMsg" :hidBtn="hidBtn" @tryAgain="onTap" :styleTop="44"/>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import placeholder from '@/components/placeholder'
import wxpayfn from '@/utils/paymaneger'
import pullmixin from '@/mixins/PullRefreshLayout'
import common from '@/utils/common'
import { timeQuantum } from '@/utils/index'

export default {
  props: {
    orderType: {
      defualt: -1
    },
    show: {
      defualt: false
    }
  },
  data() {
    return {
      scrollHeight: 0,
      isFirst: true,
      orderList: [],
      noData: false,
      noDataText: '退款',
      productObjArr: []
    }
  },
  watch: {
    show: function(newValue, oldValue) {
      if (newValue && this.isFirst) {
        this.onRefresh(true)
        this.isFirst = false
      }
    }
  },
  mixins: [pullmixin],
  methods: {
    toOrderDetailsPage(refundId){
      this.$wx.jumper('/pages/orderRefundDetails/main?refundId='+ refundId)
    },
    async onRefresh(isRefresh) {
      const data = await this.$fly.post(this.$url.URL_ORDEREFUND, {
        page_index: isRefresh
          ? (this.paramsDatas.pageIndex = 1)
          : this.paramsDatas.pageIndex,
        page_size: this.paramsDatas.pageSize,
        order_type: this.orderType
      })
      if (data.successCode) {
        this.preHandler(isRefresh, data.data.refund_orders.length)
        if (isRefresh) {
          this.orderList = data.data.refund_orders
          if (data.data.refund_orders.length <= 0) {
            this.noData = true
            this.isPageEmpty = true
            this.hidBtn = true
            this.emptyMsg = `您暂时还没有(${this.noDataText})订单`
          } else {
            this.isPageEmpty = false
            this.noData = false
          }
        } else {
          this.orderList.push.apply(this.orderList, data.data.refund_orders)
        }
      } else {
        this.handlerFail(isRefresh)
      }
    },
    onTap(){
      this.onRefresh(true)
    }
  },
  mounted() {
    console.log('mounted')
    if (this.show && this.isFirst) {
      this.onRefresh(true)
      this.isFirst = false
    }
    this.$root.$eventHub.$on('requestPayBack',(target) => {
      this.onRefresh(true)
    });
  },
  created() {
    this.scrollHeight = common.getWindowHeight() - 50
  },
  components: {
    placeholder
  }
}
</script>

<style>

</style>
